<template>
  <div class="community-article-container">
    <!-- 背景提示区域 -->
    <div class="bg-hint">
      <!-- 图片背景区域 -->
      <div class="bg w-100 h-100"></div>
      <!-- 浅色遮罩区域 -->
      <div class="shade w-100 h-100"></div>
      <!-- 文字区域 -->
      <div
        class="text-box w-100 h-100 d-flex justify-content-center flex-column"
      >
        <div class="text-title">交流社区</div>
        <div class="text-subtitle">
          您在这里得到帮助的同时，也希望您能分享至少一个技术心得在这里帮助其他人！
        </div>
      </div>
    </div>
    <!-- 中间列表区域 -->
    <div class="middle-list-cont">
      <div class="end-article">
        <!-- 选择查看的文章内容 -->
        <div class="end-article-options d-none d-md-block">
          <div class="start-tags">
            <button class="start-tags-select">
              热门主题 <i class="iconfont icon-xiala2"></i>
            </button>
            <button class="start-tags-button" @click="toEditor">
              发布主题
            </button>
          </div>
        </div>
        <!-- 骨架屏区域 -->
        <el-skeleton
          style="width: 100%"
          :loading="loading"
          :count="5"
          animated
          class="community_article"
        >
          <template slot="template">
            <div class="template_item">
              <el-skeleton-item variant="p" style="width: 100%" />
              <div class="community_article_item">
                <el-skeleton-item variant="image" />
                <div class="community_article_container">
                  <div style="display: flex; flex-direction: column">
                    <el-skeleton-item variant="text" style="width: 80%" />
                    <el-skeleton-item
                      variant="text"
                      style="margin-right: 16px; width: 50%; margin-top: 8px"
                    />
                  </div>
                  <div
                    style="
                      margin-top: 6px;
                      display: flex;
                      align-items: center;
                      width: 100%;
                      justify-content: space-between;
                    "
                  >
                    <el-skeleton-item variant="text" style="width: 50%" />
                    <el-skeleton-item variant="text" style="width: 20%" />
                  </div>
                </div>
              </div>
            </div>
          </template>
        </el-skeleton>
        <!-- 文章展示列表 -->
        <div class="end-article-list">
          <MyArticle
            :articleData="item"
            :menu_content="menu_content"
            v-for="item in all_article"
            :key="item.id"
          ></MyArticle>
        </div>
      </div>
    </div>
    <!-- 返回顶部栏 -->
    <GoBack :upload="true"></GoBack>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex"; //快速发送
import { getToken } from "@/utils/auth";
import Message from "@/utils/message";
let showMessage = new Message();

export default {
  name: "CommunityArticle",
  computed: {
    ...mapState("tags", ["menu_content"]), //tags为组件名
    ...mapState("mark", ["all_article"]),
  },
  data() {
    return {
      loading: true,
    };
  },
  methods: {
    ...mapActions("mark", { allArticle: "all_article" }),
    // 跳转到编辑文章路由
    toEditor() {
      if (!getToken()) {
        return showMessage.error({
          message: "只有登录后才能使用哦😋",
          type: "error",
          duration: 5 * 1000,
          offset: 80,
        });
      }
      this.$router.replace("/markdown/editor");
    },
  },
  mounted() {
    this.allArticle().then(() => {
      this.loading = false;
    });
  },
};
</script>

<style lang="less" scoped>
// 中间内容的宽度
@width: 1300px;

@media screen and (max-width: 1400px) and (min-width: 768px) {
  .end-article {
    padding: 0 40px 0 10px;
  }
}

.community-article-container {
  // 提示社区文字区域
  .bg-hint {
    width: 100%;
    height: 150px;
    position: relative;
    .bg {
      position: absolute;
      opacity: 0.3;
      background: url("@/assets/images/header_bg.png") center center repeat;
      background-size: contain;
    }
    .shade {
      position: absolute;
      z-index: 1;
      background: #8f8f8f0a;
    }
    .text-box {
      position: absolute;
      z-index: 2;
      padding: 0 16px;
      .text-title {
        font-size: 36px;
        margin-bottom: 10px;
        color: #585858;
      }
      .text-subtitle {
        color: #666666;
      }
    }
  }
  // 中间列表区域
  .middle-list-cont {
    position: relative;
    padding-bottom: 54px;
    .start-tags {
      max-width: @width;
      margin: 12px auto;
      padding: 20px;
      padding-bottom: 0;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .start-tags-select {
        display: inline-block;
        margin-bottom: 0;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        white-space: nowrap;
        line-height: 20px;
        padding: 12px 18px;
        border-radius: 6px;
        -webkit-user-select: none;
        user-select: none;
        color: #669974;
        background: #dff3e5;
        border: 0;
        transition: background 0.4s;
        &:hover {
          background: #d1f0da;
        }
      }
      .start-tags-button {
        display: inline-block;
        margin-bottom: 0;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        white-space: nowrap;
        line-height: 20px;
        padding: 12px 24px;
        border-radius: 6px;
        -webkit-user-select: none;
        user-select: none;
        color: #669974;
        background: #dff3e5;
        border: 0;
        transition: background 0.4s;
        &:hover {
          background: #d1f0da;
        }
      }
    }
    .end-article-list {
      max-width: @width;
      margin: 0 auto;
      position: relative;
      .start-tags {
        position: absolute;
        left: 0;
        top: 20px;
        transform: translateX(-120%);
      }
    }
  }
  // 骨架屏
  .community_article {
    max-width: 1340px;
    margin: 0 auto;
    /deep/ .el-skeleton {
      padding: 0 20px;
      .el-skeleton__p {
        height: 22px;
      }
      .template_item {
        padding: 20px 0;
        margin: 0 20px;
        border-bottom: 1px solid #e1e1e1;
      }
      .community_article_item {
        display: flex;
        margin-top: 4px;
        .community_article_container {
          padding-left: 14px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
        & > div {
          &:last-of-type {
            flex: auto;
          }
        }
        .el-skeleton__text {
          height: 18px;
        }
        .el-skeleton__image {
          width: 140px;
          height: 100px;
        }
      }
    }
  }
}
</style>